<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="icon" href="/favicon.ico" />
  <title>Online-Exam管理系统</title>
  <!--[if lt IE 11
    ]><script>
      window.location.href = '/html/ie.html';
    </script><!
  [endif]-->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    #nprogress .bar {
      /* 自定义颜色 需要加上!important;，这里加了渐变色 */
      //background: red !important;
      background-color: #ffffff !important;
      background-image: linear-gradient(0deg, #FFFFFF 0%, var(--el-color-primary-light-7) 50%, var(--el-color-primary) 100%) !important;
      height: 6px !important;
    }

    #nprogress .peg {
      box-shadow: none !important;
    }

    .loader-container {
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中（可选） */
      min-height: 100vh;
      --path: #2F3545;
      --dot: #5628EE;
      --duration: 3s;
    }

    .loader-container .loader {
      width: 88px;
      height: 88px;
      position: relative;
      display: inline-block;
      margin: 0 32px;
    }

    .loader-container .loader:before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      position: absolute;
      display: block;
      background: var(--dot);
      top: 74px;
      left: 38px;
      transform: translate(-36px, -36px);
      animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader-container .loader svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .loader-container .loader svg rect,
    .loader-container .loader svg polygon,
    .loader-container .loader svg circle {
      fill: none;
      stroke: var(--path);
      stroke-width: 20px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .loader-container .loader svg polygon {
      stroke-dasharray: 290 152 290 152;
      stroke-dashoffset: 0;
      animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader-container .loader svg rect {
      stroke-dasharray: 384 128 384 128;
      stroke-dashoffset: 0;
      animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader-container .loader svg circle {
      stroke-dasharray: 300 100 300 100;
      stroke-dashoffset: 150;
      animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader-container .loader.triangle {
      width: 96px;
    }

    .loader-container .loader.triangle:before {
      left: 42px;
      transform: translate(-20px, -36px);
      animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    @keyframes pathTriangle {
      33% {
        stroke-dashoffset: 148;
      }

      66% {
        stroke-dashoffset: 294;
      }

      100% {
        stroke-dashoffset: 442;
      }
    }

    @keyframes dotTriangle {
      33% {
        transform: translate(0, 0);
      }

      66% {
        transform: translate(20px, -36px);
      }

      100% {
        transform: translate(-20px, -36px);
      }
    }

    @keyframes pathRect {
      25% {
        stroke-dashoffset: 128;
      }

      50% {
        stroke-dashoffset: 256;
      }

      75% {
        stroke-dashoffset: 384;
      }

      100% {
        stroke-dashoffset: 512;
      }
    }

    @keyframes dotRect {
      25% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(36px, -36px);
      }

      75% {
        transform: translate(0, -72px);
      }

      100% {
        transform: translate(-36px, -36px);
      }
    }

    @keyframes pathCircle {
      25% {
        stroke-dashoffset: 250;
      }

      50% {
        stroke-dashoffset: 350;
      }

      75% {
        stroke-dashoffset: 450;
      }

      100% {
        stroke-dashoffset: 550;
      }
    }

    .loader-container .dribbble {
      position: fixed;
      display: block;
      right: 20px;
      bottom: 20px;
    }

    .loader-container .dribbble img {
      display: block;
      height: 28px;
    }

  </style>
</head>

<body>
<div id="app">
    <div class="loader-container">
      <div class="loader">
        <svg viewBox="0 0 160 160">
          <circle id="test" cx="80" cy="80" r="64"></circle>
        </svg>
      </div>

      <div class="loader triangle">
        <svg viewBox="0 0 172 160">
          <polygon points="86 16 158 144 14 144"></polygon>
        </svg>
      </div>

      <div class="loader">
        <svg viewBox="0 0 160 160">
          <rect x="16" y="16" width="128" height="128"></rect>
        </svg>
      </div>
    </div>
  </div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
